<template>
	<view class="Invitation">
		<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/20210109132251.gif" mode="" style="width: 100%;height: 340px"></image>
		<view class="" >
			<view class="" @click="share('miniwechat')" style="display: flex;justify-content: center;width:750rpx;">
				<button open-type="share" class="" style="position: relative;display: flex;align-items: center;justify-content:center;height:200rpx;">
					<image src="https://lailemefresh.oss-cn-shanghai.aliyuncs.com/imgs/2YNSJW4NwsEf2ZD.png" mode="" style="width: 76px;height:76px;"></image>
					<text style="position: absolute;top:130rpx;left:0;width: 100%;font-size:12px">分享微信好友</text>
				</button>
			</view>
			<view class="" style="width: 32px;height: 0;"></view>
			<!-- <view class="flex column" @click="naviageToPage('/pages/haibao/haibao')"> -->
			<view class="flex column" @click="share('min')">
				<!-- <button class="round" style="position: relative;">
					<image src="https://lailemefresh.oss-cn-shanghai.aliyuncs.com/imgs/AdRP3QjijAimkQZ.png" mode="" style="width: 76px;height: 76px;"></image>
					<button class="share-btn">分享</button>
					<text style="position: absolute;top: 50px;left:0;width: 100%;font-size: 12px;">分享朋友圈</text>
				</button> -->

				<view class="flex_row_c_c modalView" :class="qrShow ? '' : ''" @tap="hideQr()">
					<view class="flex_column">
						<view class="backgroundColor-white padding1vh border_radius_10px"><image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image></view>
						<view class="flex_row marginTop2vh">
							<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
							<button type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button>
						</view>
					</view>
				</view>
				<!-- 画布 -->
				<view class="hideCanvasView">
					<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{ width: (poster.width || 10) + 'px', height: (poster.height || 10) + 'px' }"></canvas>
				</view>
			</view>
		</view>
		<view class="btnBox flex">
			<view class="box">
				<view class="title">我的邀请</view>
				<view class="content">
					<span class="number">{{ invite_num }}</span>
					<span>人</span>
				</view>
				<view class="btn" @click="naviageToPage('/pages/InvitationList/InvitationList')">点击查看</view>
			</view>
			<view class="box">
				<view class="title">我的抢购券</view>
				<view class="content" style="color: #EE4F08;">
					<span class="number">{{ coupen_num }}</span>
					<span>张</span>
				</view>
				<view class="btn" style="background-color: #EE4F08;" @click="naviageToPage('/pagesA/parity/PanicbuyingLIst')">前往抢购</view>
			</view>
		</view>
		<view class="listBig" style="width: 100%;">
			<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/d0939c4f92c05e4189972c18658258d.png" mode="" style="width: 100%;height:94rpx;"></image>
			<view class="listBox">
				<view class="list" v-for="(item, i) in list" :key="i">
					<view class="img" style="width: 227rpx;height: 227rpx;"><image :src="item.img" mode="" style="width: 100%;height: 100%;"></image></view>
					<view class="right">
						<view class="" style="font-weight: Bold;margin-top: 12px;">{{ item.title }}</view>
						<view class="flex" style="justify-content: space-between;margin: 7.5px;align-items: flex-end;">
							<view class="" style="color: #999999;text-decoration: line-through;">市场价:{{ item.originalPrice / 100 }}</view>
							<view class="" style="font-size: 30px;color: #EE4F08;">{{ item.stockDto.price / 100 }}元</view>
						</view>
						<!-- 	<view class="btn">
							立即领券
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import _app from '@/js_sdk/app.js';
import { getSharePoster } from '@/js_sdk/app.js';
export default {
	name: 'canvas-drawer',
	data() {
		return {
			url: '',
			invite_num: 0,
			coupen_num: 0,
			list: [],
			p: '',
			poster: {},
			qrShow: false,
			canvasId: 'default_PosterCanvasId',
			count: 0
		};
	},
	mounted() {
		let that = this;
		that.$api
			.request('activity', 'inviteBuyingInfo', failres => {
				that.logining = false;
				that.$api.msg(failres.errmsg);
			})
			.then(res => {
				console.log(res);
				that.p = res.data.p;
				that.coupen_num = res.data.coupen_num;
				that.invite_num = res.data.invite_num;
			});
		that.$api
			.request(
				'activity',
				'activityGoodsList',
				{
					activityType: 2,
					storageId: this.$store.state.storageId
				},
				failres => {
					that.logining = false;
					that.$api.msg(failres.errmsg);
				}
			)
			.then(res => {
				console.log(res);
				that.list = res.data;
			});
	},
	onShareAppMessage() {
		return {
			title: '0.01限时大抢购',
			// imageUrl: this.goods.img,
			path: '/pages/share/inviteNewPeople?p=' + this.p
		};
	},

	methods: {
		skip() {
			console.log('22test');
			uni.navigateTo({
				url: '/pages/index/index'
			});
		},
		naviageToPage(page, title) {
			const that = this;
			if (title) {
				console.log(title, 'jinlai');
				title ? title : '';
				uni.navigateTo({
					url: page + '&title=' + title
				});
			} else {
				console.log(page);
				uni.navigateTo({
					url: page
				});
			}
			// console.log(that.categoryButtomList[index].title)
		},
		share(type) {
			// console.log(type);
			// console.log(1111);
			// console.log(that.url, 'test');
			let that = this;
			if (type == 'miniwechat') {
				console.log(type);
				console.log(that.url, 'test');
				uni.showShareMenu({
					title: '0.01限时大抢购--------====',
					// imageUrl: this.goods.img,
					path: that.url,

					success(res) {
						console.log(res);
					},
					fail(res) {
						console.log(res);
					}
				});
			}
			//this.shareFc();
		},

		saveImage() {
			console.log('test999');

			uni.saveImageToPhotosAlbum({
				filePath: this.poster.finalPath,
				success(res) {
					_app.showToast('保存成功');
				}
			});

			// #ifdef H5
			_app.showToast('保存了');
			// #endif
		},
		share(type) {
			// console.log(1111)

			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png',
				title: '欢迎体验uniapp',
				miniProgram: {
					id: 'gh_abcdefg',
					path: 'pages/index/index',
					type: 0,
					webUrl: 'http://uniapp.dcloud.io'
				},
				success: ret => {
					console.log(JSON.stringify(ret));
				}
			});
			let that = this;
			if (type == 'miniwechat') {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: 'http://uniapp.dcloud.io/',
					title: 'uni-app分享',
					summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
					imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png',
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			}
			if (type == 'min') {
				uni.share({
					provider: 'weixin',
					scene: 'WXSenceTimeline',
					type: 0,
					href: 'http://uniapp.dcloud.io/',
					title: 'uni-app分享',
					summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
					imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png',
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			}
			// 		// #ifdef APP-PLUS
			// 		_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
			// 		// #endif

			// #ifndef APP-PLUS
			_app.showToast('分享了');
			// #endif
		},
		hideQr() {
			this.qrShow = false;
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6fa;
}
.Invitation {
	// min-height: 100vh;

	.round {
		background: #f4f6fa;
		border: none;
		outline: none;
		width: 76px;
		height: 100px;
		border: none !important;
		padding: 0;
	}

	button::after {
		border: none !important;
	}

	.column {
		flex-flow: column;
		align-items: center;
		font-size: 12px;
	}

	.center {
		justify-content: center;
	}

	.btnBox {
		width: calc(100% - 30px);
		background-color: #fff;
		box-shadow: 1px 1px 10px -6px #404044;
		border-radius: 10px;
		padding: 20px 0 15px;
		position: relative;
		margin: 0 auto;

		&::after {
			display: block;
			content: '';
			width: 1px;
			height: 117px;
			background-color: #d8d9de;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.title {
			color: #4e4c49;
			font-weight: bold;
		}

		.box {
			// height: 156rpx;
			width: 50%;
			display: flex;
			flex-flow: column;
			justify-content: space-around;
			align-items: center;
			text-align: center;

			.content {
				color: #b47d3c;

				.number {
					font-size: 100rpx;
				}
			}

			.btn {
				width: 100px;
				height: 30px;
				background-color: #d39f62;
				text-align: center;
				line-height: 30px;
				color: #fff;
				border-radius: 30rpx;
			}
		}
	}

	.listBig {
		position: relative;
		padding: 0 30rpx 18px;
		margin-top: 10rpx;
		.listBox {
			top: 50px;
			left: 50%;
			transform: translateX(-50%);
			width: calc(100% - 59rpx);
			position: absolute;
		}
		.list {
			width: 100%;
			display: flex;
			align-items: center;
			background-color: #fff;
			border-bottom: 1px solid #f7f4f8;
			padding: 22rpx;

			.img {
				margin-right: 46rpx;
			}

			.right {
				.btn {
					// width: 230rpx;
					// height: 60rpx;
					border: 1px solid #ee4f08;
					color: #ee4f08;
					border-radius: 50px;
					padding: 7rpx 37rpx;
					padding-right: 71rpx;
					position: relative;
					max-width: 120px;
					margin: 26rpx 0;

					&::after {
						display: block;
						content: '';
						width: 42rpx;
						height: 40rpx;
						position: absolute;
						top: 50%;
						right: 10px;
						transform: translateY(-50%);
						background: url(../../static/youhui.png) no-repeat center;
						background-size: 100% 100%;
					}
				}
			}
		}
	}
}
.hideCanvasView {
	position: relative;
}

.hideCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}

.flex_row_c_c {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.modalView {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	outline: 0;
	transform: scale(1.2);
	perspective: 2500upx;
	background: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out;
	pointer-events: none;
	backface-visibility: hidden;
	z-index: 999;
}

.modalView.show {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.flex_column {
	display: flex;
	flex-direction: column;
}

.backgroundColor-white {
	background-color: white;
}

.border_radius_10px {
	border-radius: 10px;
}

.padding1vh {
	padding: 1vh;
}

.posterImage {
	width: 60vw;
}

.flex_row {
	display: flex;
	flex-direction: row;
}

.marginTop2vh {
	margin-top: 2vh;
}
</style>
